<template>
	<view class="choose-area">
		<view style="background-color:  #4BA677; height: 160rpx;"></view>
		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-align">
						<u-icon name="info-circle-fill" color=" #4BA677"></u-icon>
						<u-text text="场地布局图" color=" #4BA677" size="24rpx" margin="0 0 0 7rpx"></u-text>
					</view>
				</view>
			</view>

			<!-- 选择区域 -->
			<view class="choose-area-wrapper">
				<view v-for="item in area" :key="item.id" class="item flex-between"
					:class="{ active: activeArea === item.id }" @click="onClickArea(item)">
					<view class="flex-align">
						<view class="name bold">{{ item.name }}</view>
						<price :value="item.price" :color="item.status !== 2 ? '#4BA677' : '#999'"></price>
					</view>
					<u-tag :text="item.statusName" :bgColor="activeArea === item.id ? ' #4BA677' : '#fff'"
						:borderColor="activeArea === item.id ? 'rgba(0,0,0,0)' : '#999'"
						:color="activeArea === item.id ? '#fff' : '#999'" shape="circle" size="mini" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					name: 'CBA苏州市体育中心',
					status: '进行中',
					price: 888,
					rest: 8
				},
				activeArea: 1,
				area: [{
						id: 1,
						name: '场地东侧-A区',
						price: 888,
						status: 1,
						statusName: '有座'
					},
					{
						id: 2,
						name: '场地东侧-A区',
						price: 888,
						status: 1,
						statusName: '有座'
					},
					{
						id: 3,
						name: '场地东侧-A区',
						price: 888,
						status: 2,
						statusName: '售罄'
					}
				]
			}
		},
		methods: {
			onClickArea(item) {
				if (item.status !== 2) {
					this.activeArea = item.id;
					uni.navigateTo({
						url: '/page_points/activity-seat/seat-selection/seat-selection'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choose-area {
		.top {
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 0 30rpx 20rpx;
			margin-top: -30rpx;
			width: 100%;
			box-shadow: 0px 24rpx 57rpx 0px rgba(8, 73, 162, 0.05);

			.name,
			.status {
				color: #fff;
			}
		}

		.goods {
			.name {
				font-size: 28rpx;
			}

			.status {
				font-size: 24rpx;
			}

			.rest {
				color: #BEBEBE;
				font-size: 22rpx;
			}
		}

		.choose-area-wrapper {
			margin-top: 60rpx;

			.item {
				padding: 34rpx 18rpx 35rpx 19rpx;
				background-color: rgb(246, 247, 249);
				border: solid 2rpx rgb(153, 153, 153);
				border-radius: 5rpx;

				&:not(:first-of-type) {
					margin-top: 18rpx;
				}

				&.active {
					background-color: #fff;
					border-color: #4BA677;
				}
			}

			.name {
				color: #333;
				font-size: 28rpx;
				margin-right: 100rpx;
			}
		}
	}
</style>